<template>
    <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    // props: ["page", "pageSize", "total", "pageSizes"],
    props: {
        page: {
            default() {
                return 1
            },
            type: Number,
        },
        pageSize: {
            default() {
                return 20
            },
            type: Number,
        },
        total: {
            default() {
                return 0
            },
            type: Number,
        },
        pageSizes: {
            default() {
                return [20, 40, 60, 80]
            },
            type: Array(),
        },
    },
    methods: {
        handleSizeChange(val) {
            // 控制每一页显示多少条
            // console.log(`每页 ${val} 条`);
            this.$emit("changePageSize", val)
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.$emit("changePage", val)
        },
    },
    data() {
        return {
            // 控制当前显示是哪页
            // currentPage4: 1,
        }
    },
}
</script>

<style></style>
